<template>
  <div class="box">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'start' }">
          <i class="el-icon-s-home"></i>
          首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>正文</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mian">
      <h2>{{ dataLits.title ||"没有标题" }}</h2>
      <span>
        <i class="el-icon-date"></i>
        发表于{{ dataLits.updateTime }}</span
      >
      <span>
        <i class="el-icon-folder-opened"></i>
        分类于{{ dataLits.categoryName }}</span
      >
      <span>
        <i class="el-icon-view"></i>
        阅读量{{ dataLits.readNum }}</span
      >
      <div class="content" v-html="dataLits.content"></div>
      <p class="tags" v-for="item in dataLits.tags" :key="item.id">
        # {{ item.name }}
      </p>
    </div>
    <div class="bottom">
      <div class="bottom-item" @click="preArticleFun">
        <i class="el-icon-arrow-left"></i>
        <span>上一篇</span>
        <p>{{ dataLits.preArticle.title || '没有上一篇'}}</p>
      </div>
      <div class="bottom-item" @click="nextArticleFun">
        <span>下一篇</span>
        <i class="el-icon-arrow-right"></i>
        <p>{{ dataLits.nextArticle.title || '没有下一篇'}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Detail } from "../units/api.js";
export default {
  data() {
    return {
      dataLits: [],
      btnTitList: [],
      id: {
        articleId: 1,
      },
    };
  },
  created() {
    // this.id.articleId= this.$route.query;
    this.getDate();
  },
  methods: {
    async getDate() {
      this.id.articleId= this.$route.query;
      let res = await Detail(this.id.articleId);
      console.log("这是获取的正文", res);
      this.dataLits = res.data.data;
      this.id.articleId = res.data.data.preArticle.id || null;
    },
    async preArticleFun() {
      let res = await Detail(this.id);
      if (res.status == 200) {
        this.dataLits = res.data.data;
        this.id.articleId = res.data.data.preArticle.id || null;
        console.log("这是上一页", res);
      }
    },
    async nextArticleFun() {
      let res = await Detail(this.id);
      if (res.status == 200) {
        this.dataLits = res.data.data;
        this.id.articleId = res.data.data.nextArticle.id || null;
        console.log("这是下一页", res);
      }
    },
    // async nextArticleFun() {
    //   let res = await Detail(this.id);
    //   if (!res.data.data.nextArticle.id) {
    //     console.log("没有id");
    //   } else {
    //     if (res.status == 200) {
    //       this.dataLits = res.data.data;
    //       this.id.articleId = res.data.data.nextArticle.id || null;
    //       console.log("这是下一页", res);
    //     }
    //   }
    // },
  },
};
</script>

<style scoped>
.box {
  margin: 1vw;
  background-color: white;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 20px;
}
.title {
  margin: 20px 0;
}
.mian {
  text-align: start;
}
.mian > h2 {
  margin: 20px 0;
}
.mian > span {
  margin-right: 15px;
  color: #bbb;
}
.content {
  margin: 20px 0;
}
.tags {
  display: inline-block;
  padding: 4px 9px;
  background-color: #def7ec;
  border-radius: 20px;
}
.bottom {
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #bbb;
  display: flex;
  justify-content: space-between;
}
</style>